import Table from '@/components/Table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
    width: 150,
    ellipsis: true,
    align: 'left',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
    width: 80,
    align: 'center',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: 100,
    ellipsis: true,
    align: 'left',
  },
];

const dataSource = [
  { key: '1', name: 'Jill Blue', age: 31, address: 'Tokyo No. 1 Lake Park' },
  { key: '2', name: 'Jim Purple', age: 32, address: 'Tokyo No. 1 Lake Park' },
  { key: '3', name: 'Jane White', age: 53, address: 'Sidney No. 1 Lake Park' },
  { key: '4', name: 'Jane Purple', age: 36, address: 'Tokyo No. 1 Lake Park' },
  { key: '5', name: 'Joe White', age: 57, address: 'Sidney No. 1 Lake Park' },
  { key: '6', name: 'Jenny Black', age: 49, address: 'London No. 1 Lake Park' },
  { key: '7', name: 'Jerry Grey', age: 45, address: 'Sidney No. 1 Lake Park' },
  { key: '8', name: 'Jim Red', age: 22, address: 'London No. 1 Lake Park' },
  { key: '9', name: 'Joe Black', age: 27, address: 'New York No. 1 Lake Park' },
  { key: '10', name: 'Jack Green', age: 50, address: 'Tokyo No. 1 Lake Park' },
  { key: '11', name: 'Jane Black', age: 41, address: 'New York No. 1 Lake Park' },
  { key: '12', name: 'Jenny White', age: 28, address: 'London No. 1 Lake Park' },
  { key: '13', name: 'John Red', age: 38, address: 'Sidney No. 1 Lake Park' },
  { key: '14', name: 'Joe Green', age: 35, address: 'London No. 1 Lake Park' },
  { key: '15', name: 'Jim White', age: 48, address: 'Tokyo No. 1 Lake Park' },
  { key: '16', name: 'Jane Grey', age: 44, address: 'New York No. 1 Lake Park' },
  { key: '17', name: 'Jerry White', age: 52, address: 'Sidney No. 1 Lake Park' },
  { key: '18', name: 'Jill Green', age: 23, address: 'London No. 1 Lake Park' },
  { key: '19', name: 'Jane Blue', age: 39, address: 'Tokyo No. 1 Lake Park' },
  { key: '20', name: 'Jack Red', age: 46, address: 'New York No. 1 Lake Park' },
];

const MyTable = () => (
  <div style={{ width: '500px' }}>
    <Table
      columns={columns}
      dataSource={dataSource}
      rowKey="key"
      bordered
      rowHeight={50}
      containerHeight={300}
      scrollSpeed={0} // 控制滚动速度
      tooltipOnOverflow={true}
      onSortChange={(field, order) => console.log(`Sorting by ${field} ${order}`)}
    />
  </div>
);

export default MyTable;
